<template>
    <div>
        <div class="s_banner s_banner2" key="id">
            <div class="header s_header">
                <router-link to="workerlist">
                    <img src="@/assets/sfj//images/fh1.png" alt="">法律服务工作者
                </router-link>
            </div>
            <dl class="lss_jj lss_jj1">
                <dt><img :src="legalWorkersInfo.photo" alt=""></dt>
                <dd><p>{{legalWorkersInfo.name}}<span><i>|</i>{{legalWorkersInfo.tag}}</span></p><span>{{legalWorkersInfo.phone}}</span>
                    <span>{{legalWorkersInfo.field}}</span></dd>
            </dl>

        </div>
        <div class="main">
            <h1 class="bt">法律服务工作者简介</h1>
            <!--      <ul class="rz">-->
            <!--        <li><img src="@/assets/images/sm.png" alt="">实名认证</li>-->
            <!--        <li><img src="@/assets/images/zy.png" alt="">执业认证</li>-->
            <!--        <li><img src="@/assets/images/pt.png" alt="">平台认证</li>-->
            <!--      </ul>-->

            <div class="text-box">
                <div :class="['txt', { 'over-hidden': !unfold }]" ref="textBox">
                    <span ref="spanBox" v-html="legalWorkersInfo.introduction"></span>
                </div>
                <div class="btn" v-if="ifOver" @click="unfold = !unfold">{{unfold ? '收起' : '展开全部内容'}}</div>
            </div>
        </div>
        <ul class="jj">
<!--            <li><span>执业年限：</span>{{legalWorkersInfo.practiceYears}}&ensp;年</li>-->
<!--            <li><span>执业证号：</span>{{legalWorkersInfo.practiceCertification}}</li>-->


            <li><span>联系电话：</span>
                <router-link to="tel:legalWorkersInfo.phone">{{legalWorkersInfo.phone}}<img src="@/assets/sfj//images/tel.png" alt="">
                </router-link>
            </li>
            <li><span>联系地址：</span>{{legalWorkersInfo.address}}<img src="@/assets/sfj//images/dz.png" alt=""></li>
            <li><span>擅长领域：</span>{{legalWorkersInfo.field}}</li>


        </ul>
    </div>
</template>

<script>
    import home from "@/api/lawworkers/home";

    export default {
        name: "text-box",
        data() {
            return {
                legalWorkersInfo_id: this.$route.query.id,
                legalWorkersInfo: {},
                ifOver: true, // 文本是否超出三行，默认否
                unfold: false, // 文本是否是展开状态 默认为收起
            };
        },
        methods: {
            getDetailById(name) {
                home.getDetailById(name)
                    .then(response => {
                        this.legalWorkersInfo = response.data.data;
                    });
            },
        },
        mounted: function () {
            // 判断是否显示展开收起按钮
            // this.ifOver = this.$refs.spanBox.offsetHeight > this.$refs.textBox.offsetHeight;
            this.getDetailById(this.legalWorkersInfo_id);
        },
    }
</script>

<style scoped>
    /*@import "../assets/sfj/css/base.css";*/
    /*@import "../assets/sfj/css/other.css";*/

    .txt {
        font-size: 16px;
        color: #333;
        margin-bottom: 5px;
    }

    .over-hidden {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
    }

    .btn {
        color: #357892;
    }

</style>
